<template>
	<view class="login">
		<!--顶部返回按钮-->
		<text class="back-btn iconfont iconzuo" @tap="navBack"></text>
		<view class="login-top bg-active">
			<view @click="splash" class="desc">
				<view class="title">Hi~</view>
				<text>{{ appName }}欢迎您</text>
			</view>
			<image class="login-pic" src="/static/images/login/login-pic.png"></image>
		</view>
		<view class="login-type-content">
			<image class="login-bg" src="/static/images/login/login-bg.png" :style="{ height: tabCurrentIndex === 1 ? '150vw' : '94vw' }"></image>
			<view class="main">
				<view class="nav-bar">
					<view
						class="nav-bar-item"
						v-for="(item, index) in typeList"
						:key="index"
						:class="tabCurrentIndex === index ? 'nav-bar-item-active text-active' : ''"
						@tap="tabClick(index)"
					>
						{{ item.text }}
					</view>
				</view>
				<block v-if="tabCurrentIndex === 0">
					<view class="login-type-form">
						<view class="input-item">
							<tui-icon class="iconfont" name="mobile" :size="20" color="#6d7a87"></tui-icon>
							<input class="login-type-input" type="number" name="mobile" v-model="loginParams.mobilePhone" placeholder="请输入手机号码" maxlength="11" />
						</view>
						<view class="input-item" v-if="loginByPass">
							<tui-icon class="iconfont" name="pwd" :size="20" color="#6d7a87"></tui-icon>
							<input class="login-type-input" type="password" v-model="loginParams.passwd" placeholder="请输入密码" maxlength="20" />
						</view>
					</view>
					<view class="login-type-tips">
						<!-- <view @tap="showLoginBySmsCode" class="forget-section">{{ loginByPass ? '验证码登录' : '密码登录' }}</view> -->
						<view class="forget-section"></view>
						<text @tap="navTo('/pages/login/forget')">忘记密码？</text>
					</view>
					<button class="confirm-btn bg-active" :disabled="btnLoading" :loading="btnLoading" @tap="toLogin">登录</button>
				</block>
				<block v-if="tabCurrentIndex === 1">
					<view class="login-type-form">
						<view class="input-item">
							<tui-icon class="iconfont" name="mobile" :size="20" color="#6d7a87"></tui-icon>
							<input class="login-type-input" type="number" name="mobile" v-model="registerParams.mobilePhone" placeholder="请输入手机号码" maxlength="11" />
						</view>
						<view class="input-item input-item-sms-code">
							<tui-icon class="iconfont" name="pwd" :size="20" color="#6d7a87"></tui-icon>
							<view class="input-wrapper">
								<view class="rf-input-wrapper">
									<input type="number" class="login-type-input" v-model="registerParams.msgCode" placeholder="请输入验证码" maxlength="6" />
								</view>
								<button class="sms-code-btn" :disabled="smsCodeBtnDisabled" @tap.stop="getSmsCode('register', registerParams.mobilePhone)">
									<text v-if="!smsCodeBtnDisabled">获取验证码</text>
									<text v-else class="sms-code-resend">{{ `重新发送 (${codeSeconds})` }}</text>
								</button>
							</view>
						</view>
						<view class="input-item">
							<tui-icon class="iconfont" name="pwd" :size="20" color="#6d7a87"></tui-icon>
							<input class="login-type-input" type="password" v-model="registerParams.passwd" placeholder="请输入密码" maxlength="20" />
						</view>
						<view class="input-item">
							<tui-icon class="iconfont" name="pwd" :size="20" color="#6d7a87"></tui-icon>
							<input class="login-type-input" type="password" v-model="registerParams.passwd_repetition" placeholder="请重新确认密码" maxlength="20" />
						</view>
						<view class="input-item">
							<tui-icon class="iconfont" name="imkeyboard" :size="20" color="#6d7a87"></tui-icon>
							<input class="login-type-input" type="text" v-model="registerParams.referralCode" placeholder="邀请码" maxlength="20" />
						</view>
					</view>
					<button class="confirm-btn bg-active" :disabled="btnLoading" :loading="btnLoading" @tap="toRegister">注册</button>
				</block>
			</view>
		</view>
		<!-- <view class="login-type-bottom text-active">{{ appName }} 版权所有</view> -->
	</view>
</template>
<script>
import { registerCode, register, loginpasswd } from '@/service/login.js';
import form from '@/utils/validation.js';
const plug = uni.requireNativePlugin('fn-ad');
export default {
	data() {
		return {
			title: 'fn-ad广告',
			appId: 13593,
			appKey: '4452faf3a9c6c825',
			useMediation: true,

			loginParams: {
				mobilePhone: '',
				passwd: ''
			},
			registerParams: {
				mobilePhone: '',
				passwd: '',
				passwd_repetition: '',
				msgCode: '',
				referralCode: ''
			},
			btnLoading: false,
			reqBody: {},
			codeSeconds: 0, // 验证码发送时间间隔
			loginByPass: true,
			smsCodeBtnDisabled: false,
			userInfo: null,
			appName: '金猪宝宝',
			tabCurrentIndex: 0,
			typeList: [
				{
					text: '登录'
				},
				{
					text: '注册'
				}
			]
		};
	},
	onLoad(options) {
		const auth = uni.getStorageSync('auth');
		if (auth) {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
		this.tabCurrentIndex = parseInt(options.type || 0, 10);
	},
	onShow() {
		console.log('onShowxx');
	},
	methods: {
		//开屏
		splash() {
			let _this = this;
			plug.splash(
				{
					appId: this.appId,
					appKey: this.appKey,
					placementId: 'ec69981ddf7',
					useMediation: this.useMediation,
					showLogo: false
				},
				ret => {
					_this.title = JSON.stringify(ret);
					console.log(_this.title);
				}
			);
		},
		//插屏
		interstitialAd() {
			let _this = this;
			plug.interstitialAd(
				{
					appId: this.appId,
					appKey: this.appKey,
					placementId: 'ec69981ddf7',
					useMediation: this.useMediation
				},
				ret => {
					_this.title = JSON.stringify(ret);
				}
			);
		},
		//激励视频
		rewardedVideoAd() {
			let _this = this;
			plug.rewardedVideoAd(
				{
					appId: this.appId,
					appKey: this.appKey,
					placementId: 'ec6997ece79',
					useMediation: this.useMediation
				},
				ret => {
					_this.title = JSON.stringify(ret);
				}
			);
		},
		tapReg() {
			uni.navigateTo({
				url: 'register'
			});
		},
		// 发送验证码并进入倒计时
		async getSmsCode(usage = 'login') {
			if (usage == 'register') {
				//进行表单检查
				let rules = [
					{
						name: 'mobilePhone',
						rule: ['required', 'isMobile'],
						msg: ['请输入手机号码', '请输入正确的手机号码']
					}
				];
				let checkRes = form.validation(this.registerParams, rules);
				if (!checkRes) {
					await registerCode({ mobilePhone: this.registerParams.mobilePhone });
					this.$msg('验证码已发送');
					this.smsCodeBtnDisabled = true;
					this.codeSeconds = 60;
					const i = setInterval(v => {
						this.codeSeconds--;
						if (this.codeSeconds == 0) {
							clearInterval(i);
							this.smsCodeBtnDisabled = false;
						}
					}, 1000);
				}
				console.log(checkRes);
			}
		},
		// 切换登录方式
		showLoginBySmsCode() {
			this.loginByPass = !this.loginByPass;
		},
		// 返回上一页
		navBack() {
			uni.navigateBack({ delta: -1 });
		},
		// 统一跳转路由
		navTo(url) {
			uni.navigateTo({ url });
		},
		// 提交表单
		async toLogin() {
			let rules = [
				{
					name: 'mobilePhone',
					rule: ['required', 'isMobile'],
					msg: ['请输入手机号码', '请输入正确的手机号码']
				},
				{
					name: 'passwd',
					rule: ['required'],
					msg: ['请输入密码']
				}
			];

			try {
				this.btnLoading = true;
				let checkRes = form.validation(this.loginParams, rules);
				if (!checkRes) {
					const resp = await loginpasswd(this.loginParams, { loading: true });
					console.log('resp', resp);
					this.$store.state.token = resp;
					uni.setStorageSync('auth', resp);
					setTimeout(v => {
						this.$store.state.lock = 0;
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 100);
				}
			} catch (e) {
				console.log(e);
			} finally {
				this.btnLoading = false;
			}
		},
		// 切换登录/注册
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		// 注册账号
		async toRegister() {
			let rules = [
				{
					name: 'mobilePhone',
					rule: ['required', 'isMobile'],
					msg: ['请输入手机号码', '请输入正确的手机号码']
				},
				{
					name: 'msgCode',
					rule: ['required', '_isNum'],
					msg: ['请输入验证码']
				},
				{
					name: 'passwd',
					rule: ['required', 'isSame:passwd_repetition'],
					msg: ['请输入密码', '两次输入密码不正确']
				}
			];
			try {
				this.btnLoading = true;
				let checkRes = form.validation(this.registerParams, rules);
				if (!checkRes) {
					const resp = await register(this.registerParams);
					if (resp) {
						this.tabCurrentIndex = 0;
						uni.showToast({
							duration: 3000,
							icon: 'none',
							title: '注册成功，自动登录中'
						});
						uni.setStorageSync('auth', resp);
						setTimeout(v => {
							uni.hideToast();
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 100);
					}
				}
			} catch (e) {
			} finally {
				this.btnLoading = false;
			}
		}
	}
};
</script>
<style lang="scss">
page {
	background: #fff;
}
.login {
	width: 100%;
	position: relative;
	.bg-active {
		background-color: $uni-color-primary;
		color: #fff;
	}
	.text-active,
	.iconfont {
		color: #000000;
	}
	.back-btn {
		position: absolute;
		left: 40rpx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40rpx;
		font-size: 48rpx;
		color: #fff;
	}
	.login-top {
		height: 460rpx;
		position: relative;
		.desc {
			color: #fff;
			position: absolute;
			top: 200rpx;
			left: 40rpx;
			font-size: 48rpx;
			.title {
				font-size: 48rpx;
			}
		}
		.login-pic {
			position: absolute;
			width: 220rpx;
			height: 270rpx;
			right: 30rpx;
			top: 100rpx;
		}
	}
	.login-type-content {
		position: relative;
		top: -72rpx;
		.login-bg {
			width: 94vw;
			height: 94vw;
			margin: 0 3vw;
		}
		.main {
			width: 94vw;
			position: absolute;
			top: 0;
			left: 3vw;
			.nav-bar {
				display: flex;
				height: 100rpx;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 10;
				.nav-bar-item {
					flex: 1;
					display: flex;
					height: 100%;
					line-height: 96rpx;
					font-size: 32rpx;
					display: flex;
					margin: 0 120rpx;
					justify-content: center;
				}
				.nav-bar-item-active {
					color: #1000ff;
					border-bottom: 5rpx solid;
				}
			}
			.login-type-form {
				width: 80%;
				margin: 50rpx auto;
				.input-item {
					position: relative;
					height: 90rpx;
					line-height: 90rpx;
					margin-bottom: 30rpx;
					.iconfont {
						font-size: 50rpx;
						position: absolute;
						left: 0;
					}
					.login-type-input {
						height: 90rpx;
						padding-left: 80rpx;
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
					}
					.sms-code-btn,
					sms-code-resend {
						width: 240rpx;
						font-size: 26rpx;
					}
				}
			}
			.login-type-tips {
				padding: 0 50rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #666;
			}
			.confirm-btn {
				margin-top: 60upx;
				width: 80%;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
	.login-type-bottom {
		width: 100%;
		padding-bottom: 30rpx;
		text-align: center;
		font-size: 32rpx;
	}
	// 发送验证码样式
	.input-item-sms-code {
		.input-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.sms-code-btn {
			width: 200upx;
			background-color: #fff;
			display: flex;
			padding: 15upx 0;
			justify-content: center;
			align-items: center;
			border-radius: 12upx;
		}

		.sms-code-resend {
			color: #666;
		}
	}
}
.view {
	height: 1300upx;
	width: 750upx;
}
</style>
